<%--
  Created by IntelliJ IDEA.
  User: shisan
  Date: 2020/11/28
  Time: 0:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<%@ page import="Dao.DbDao" %>
<%@ page import="entity.Game" %>
<%@ page import="java.util.ArrayList" %>


<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <meta charset="UTF-8">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="icon" href="../imgres/1.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <title>XXX游戏商城</title>
</head>
<style>
    img.slide{
        width: 600px;
        height: 350px;
    }
</style>
<script src="../js/index.js"></script>
<body style="margin: 0;overflow-x: hidden;background-color: #0b0b0b">
<%!
    DbDao dbDao = new DbDao();
    ArrayList<Game> games = dbDao.getGames();
%>
<div class="head">
    <%
        String flag = (String) request.getSession().getAttribute("flag");
        if (flag==null||!flag.equals("true")) {
    %>


    <a href="../html/login.html"><span class="login" >
        登录</span></a>
    <%} else { %><span class="login" onclick="exitt()">退出登录</span>

</div>
<%}%>
<div class="fragment">
    <div style="width:900px;margin:auto;overflow:hidden; height: 400px"> <!-- 这个最外围的容器div宽度为900px，每张图宽为300px，所以只显示3张，剩下的图超出容器隐藏起来 -->
        <div class="imgs" style="width:5000px;"><!--这个div的作用是让所有的图片都排在同一水平上，这样子切换的时候效果会更好-->
            <img class="slide" src="../imgres/show2.jpg" /><!--这里的图片换上到时候自己对应的图片-->
            <img class="slide" src="../imgres/show1.jpg"/>
            <img class="slide" src="../imgres/show3.jpg"/>

        </div>
        <div>
            <div onclick="pre()" style="float:left;cursor:pointer">上一页</div>
            <div onclick="nex()" style="float:right;cursor:pointer">下一页</div>
        </div>
    </div>
    </div>
<div class="scroll"; style="margin-top: 70px">
    <div style="height: 20%">
        <%
            for (int i = 0; i < games.size(); i++) { %>
        </dl>
        <dl>
            <dt>
                <a href="/jsp/game.jsp?gameid=<%=games.get(i).getId()%>">
                    <img src="../imgres/<%=games.get(i).getCoverurl()%>" class="showimg">
                </a>
            </dt>
            <dd class="showtext">
                <%=games.get(i).getName()%>
            </dd>
        </dl>
        <%}%>

    </div>
</div>
</body>
</html>
